<template>
	<view>
		<view class="list">
			<view class="offer-info border-b">
				<view class="title">{{ item.title }}</view>
				<view class="acea-row row-middle pd-t-30">
					<view class="pic" v-if="(dataform.type ==3 && item.st !=1) || dataform.type != 3">

						<image :src="initImg(dataform.type != 4 ? item.images : item.image)" mode=""></image>
					</view>
					<view class="info-txt" v-if="dataform.type == 0 ||dataform.type == 8">
						<view class="">面积：{{ item.avea || 0 }}㎡</view>
						<template v-if="dataform.type == 0 ">
							<view class="">租金：{{ item.rent || 0 }}元</view>
							<view class="">转让费：{{ item.transferFee || 0 }} 元</view>
							<view class="" >适合行业：{{ item.workingGroupName || '' }}</view>
						</template>
						<template v-else>
							<view>单价：{{ item.salemoney  || 0 }}元/㎡</view>
							<view v-if="item.sellOunt">总价：{{ item.sellOunt/10000}}万元</view>
							<view>投资回报率：{{ item.returnInvestment || 0 }}%</view>
						</template>
						
					</view>
					<view class="info-txt" v-else-if="dataform.type == 1 || item.statusCode == 2">
						<p>面积：{{ item.area || 0 }}㎡</p>
						<p>租金：{{ item.rent || 0 }}元</p>
						<p>计划经营：{{item.categoryName || ''}}</p>
					</view>
					<view class="info-txt" v-else-if="dataform.type == 2 || item.statusCode == 4">
						<p>面积：{{ item.area || 0 }}㎡</p>
						<p>投资金额：{{ item.price || 0 }}元</p>
						<p>计划经营：{{item.categoryName || ''}}</p>
					</view>
					<view class="info-txt" v-else-if="dataform.type == 3">
						<view v-if="item.st == 0">
							<view class="">店铺名称：{{ item.storeName }}</view>
							<view class="">招聘人数：{{ item.number || 0 }}人</view>
							<view class="">薪资待遇：{{ item.salary || 0 }}K</view>
							<view class="">经验要求：{{ item.experience }}</view>
						</view>
						<view v-else>
							<view class="">期望职位：{{ item.job || '' }}</view>
							<view class="">期望薪资：{{ item.salary || 0 }}K</view>
							<view class="">工作经验：{{ item.workExperience || '-' }} 年</view>
						</view>
					</view>
					<view class="info-txt" v-else-if="dataform.type == 4 || dataform.type == 11">
						<view class="">服务类别：{{ item.typeName }}</view>
						<view class="">服务区域：{{ item.area }}</view>
						<view class="">服务金额：{{ item.price }}元</view>
					</view>
					<view class="info-txt" v-else-if="dataform.type == 6 ">
						<view class="">名称：{{ item.commodityName}}</view>
						<view class="">价格：{{ item.commodityPrice || 0 }}元</view>
						<view class="">服务区域：{{ item.serviceAreaName || '' }}</view>
						<view class="">服务特色：{{ item.serviceCharacteristics?item.serviceCharacteristics:'无'  }}</view>
					</view>
					<view class="info-txt" v-else-if="dataform.type == 9">
						<view class="">名称：{{ item.commodityName}}</view>
						<view class="">价格：{{ item.smallPrice + (item.bigPrice?'-'+item.bigPrice:'') }}元</view>
						<view class="">期望区域：{{ item.serviceAreaName || '' }}</view>
						<view class="">服务特色：{{ item.serviceCharacteristics?item.serviceCharacteristics:'无'  }}</view>
					</view>
					<view class="info-txt" v-else-if="dataform.type == 5">
						<view class="">信息标题：{{item.title}}</view>
						<view class="">信息类目：{{item.categorySonName || ''}}</view>
						<view class="">地址：{{item.address || ''}}</view>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b">
				<view class="label label-m">悬赏时间</view>
				<view class="acea-row row-middle row-right item-r sanjiao-right" @click="timeShow = true">
					<view :class="dataform.addTime ? '':'no-data-r'">{{ $u.timeFormat(dataform.addTime, 'yyyy-mm-dd') }}
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">悬赏奖金</view>
				<view class="acea-row row-middle row-right item-r">
					<view class="acea-row row-middle row-right small-ipt">
						<input type="number" placeholder="示例:3000" v-model="dataform.rewardAmount"
							:disabled="this.item.isReward==1&&dataform.trusteeship == 1">
						<text>元</text>
					</view>
					<view class="acea-row row-middle meet" :class="dataform.trusteeship == 1 ? '':'no-meet'">
						<view class="radio-list"
							@click="dataform.trusteeship == 1 ? dataform.trusteeship = 0 : dataform.trusteeship = 1">
							<view class="acea-row row-middle radio-item" v-if="dataform.trusteeship == 1">
								<image src="../static/images/radio_on.png" mode=""></image>
							</view>
							<view class="acea-row row-middle radio-item" v-else>
								<image src="../static/images/radio_no.png" mode=""></image>
							</view>
						</view>
						<view class="meet-text">托管平台</view>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label label-m">
					推广人数
				</view>
				<view class="acea-row row-middle row-right item-r">
					<view class="acea-row row-middle">
						<input type="number" v-model="dataform.promotionNum" class="ipt-s" placeholder="输入"
							placeholder-class="placeholder-class">
						<view class="ipt-txt">
							<u-tooltip text="人=金币" overlay :showToast="false" :showCopy="false" :buttons="but"
								direction="bottom" @click="a"></u-tooltip>
						</view>

						<input type="number" v-model="dataform.coin" class="ipt-s" placeholder="计算" disabled
							placeholder-class="placeholder-class">
						<view class="ipt-txt">个</view>
					</view>

					<view class="acea-row row-middle" style="margin-left: 20rpx;">
						<text>我的金币</text>
						<input type="number" v-model="myCoin" class="ipt-s ipt-s2" placeholder="我的金币" disabled
							placeholder-class="placeholder-class">
						<view class="ipt-txt">个</view>
					</view>
				</view>
			</view>
			<view class="acea-row row-middle row-between item border-b ">
				<view class="label">
					推广语
				</view>
				<view class="acea-row row-middle row-right item-r">
					<input class="input-r" type="text" placeholder="请输入推广语" placeholder-class="placeholder-class"
						v-model="dataform.generalization" />
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-datetime-picker :show="timeShow" v-model="dataform.addTime" mode="date" @cancel="timeShow = false"
			@confirm="timeShow = false"></u-datetime-picker>
		<view class="submit-btn" @click="formSubmit" :disabled="isDisabled">{{item.isReward == 1?"修改":"发布"}}悬赏</view>
		<view class="uni-p-b-98"></view>
	</view>
</template>

<script>
	import {
		RewardAddApi,
		RewardDetailApi,
		RewardUpdateApi
	} from "@/api/reward.js"
	import {
		getCoinList,
		getIndividual
	} from "@/api/api.js"
	export default {
		onLoad(option) {
			if (!option.item) return uni.navigateBack();
			this.item = JSON.parse(option.item);
			console.log('this.item', this.item)

			//类型（0经营信息、1求租、2求购、3招工、4服务信息）
			this.dataform.type = this.item.rewardType;
			if (this.dataform.type == 1) {
				this.dataform.infoId = this.item.askrentId
			} else if (this.dataform.type == 2) {
				this.dataform.infoId = this.item.buystoreId
			} else {
				this.dataform.infoId = this.item.id;
			}
			this.dataform.infoStatus = this.item.infoStatus;
			if (this.item.shopfrontPhoto) {
				this.item.images = this.item.shopfrontPhoto
				this.item.image = this.item.shopfrontPhoto
			}
			let date = new Date()
			date.setMonth(date.getMonth() + 1)
			this.dataform.addTime = this.$u.timeFormat(date, 'yyyy-mm-dd')


		},
		data() {
			return {
				item: {},
				dataform: {
					trusteeship: 1,
					promotionNum: '',
					addTime: '',
					province: '',
					city: '',
					district: ''
				},
				isDisabled: false,
				timeShow: false,
				gz: {},
				myCoin: "",
				but: [],
				hasImageWithType: []
			};
		},
		watch: {
			'dataform.promotionNum'(newVal) {
				this.dataform.coin = Math.ceil((Number(newVal) / Number(this.gz.numberPeople)) * Number(this.gz.coin))
			}
		},
		created() {
			this.getGz();
			this.getConin();
		},
		methods: {
			//
			getConin() {
				getIndividual().then(res => {
					if (res.code == 200) {
						this.myCoin = res.data.integral;
					}

				})
			},
			initImg(images) {
				// images.length<1&&this.images.push(this.$noImageShow);
				images = images ? images.split(',') : []
				let re = this.separateVideosAndImages(images);
				let imageBox = re.imageArray.length > 0 ? re.imageArray : [this.$noImageShow];
				console.log('imageBox', imageBox)
				return imageBox[0];
			},
			separateVideosAndImages(inputArray) {
				const videoArray = [];
				const imageArray = [];

				const videoExtensions = /\.(mp4|avi|mov)$/i;
				const imageExtensions = /\.(jpg|jpeg|png|gif)$/i;

				inputArray.forEach(item => {
					const extension = item.match(/\.[0-9a-z]+$/i)[0];

					if (extension.match(videoExtensions)) {
						videoArray.push(item);
					} else if (extension.match(imageExtensions)) {
						imageArray.push(item);
					}
				});

				return {
					videoArray,
					imageArray
				};
			},
			formSubmit() {
				console.log(11)
				let that = this;
				if (!this.dataform.addTime) return that.$util.Tips({
					title: '请选择悬赏时间'
				});
				if (!this.dataform.rewardAmount) return that.$util.Tips({
					title: '请输入悬赏奖金'
				});
				if (!this.dataform.promotionNum || !this.dataform.coin) return that.$util.Tips({
					title: '请输入推广人数和金币'
				});
				// if (!this.dataform.generalization) return that.$util.Tips({
				// 	title: '请输入推广语'
				// });
				if (Number(this.dataform.coin) > Number(this.myCoin)) return that.$util.Tips({
					title: '金币不足'
				}, {
					tab: 2,
					url: '/pages/aboutUsers/userGoldcoin/userGoldcoin'
				});

				if (this.dataform.trusteeship == 1) {
					this.comfrim()
				} else {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '是否立即托管',
						confirmText: '稍后托管',
						cancelText: '立即托管',
						success: function(res) {
							if (res.confirm) {

								that.comfrim();
							} else if (res.cancel) {
								that.dataform.trusteeship = 1;
								that.comfrim();
								// setTimeout(()=>{
								// 	uni.navigateTo({
								// 		url: '/pages/others/promotionTask/promotionTask'
								// 	});
								// },500)
							}
						}
					});
				}

			},
			async comfrim() {
				try {
					console.log('this.item', this.item)
					this.isDisabled = true;
					this.dataform.storeCategory = this.item.storeCategory;
					this.dataform.province = this.item.province;
					this.dataform.city = this.item.city;
					this.dataform.district = this.item.district;
					// if (this.dataform.type == 0 && this.item.status == 1) {
					// 	this.dataform.type = 8
					// } else if (this.item.type == 0) {
					// 	this.dataform.type = this.item.type
					// }

					let res = this.item.isReward == 1 ? await RewardUpdateApi(this.dataform) : await RewardAddApi(this
						.dataform);
					if (res.code == 200) {
						if (res.data.code == 200) {
							this.isDisabled = false;
							// this.$util.Tips({
							// 	title: '悬赏'+this.item.isReward==1?'修改':'发布'+'成功'
							// }, {
							// 	tab: 2,
							// 	url: "/pages/others/promotionTask/promotionTask"
							// });

							this.$refs.uToast.show({
								type: 'default',
								title: '悬赏' + this.item.isReward == 1 ? '修改' : '发布' + '成功',
								message: '悬赏' + this.item.isReward == 1 ? '修改' : '发布' + '成功',
								complete() {
									uni.navigateTo({
										url: "/pages/others/promotionTask/promotionTask"
									})
								}
							})
						} else if(res.data.code == 204){
							this.$util.Tips({
								title: res.data.msg
							}, {
								tab: 3
							});
						}else {
							if (res.data.msg.indexOf("余额不足") !== -1) {
								// this.$util.Tips({
								// 	title: e
								// }, {
								// 	tab: 2,
								// 	url: "/pages/users/user_money/index"
								// });
								uni.showModal({
									title: "提示",
									content: "余额不足,是否立即充值?",
									success(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pages/users/user_money/index"
											})
										} else {
											this.trusteeship = 0;
											// uni.navigateTo({
											// 	url: "/pages/others/promotionTask/promotionTask"
											// })
										}
									}
								})
							}
						}


					}
				} catch (e) {
					if (e.indexOf("金币不足") !== -1) {
						this.$util.Tips({
							title: '金币不足'
						}, {
							tab: 2,
							url: '/pages/aboutUsers/userGoldcoin/userGoldcoin'
						});

					}
					if (e.indexOf("余额不足") !== -1) {
						uni.showModal({
							title: "提示",
							content: "余额不足,是否立即充值?",
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/users/user_money/index"
									})
								} else {
									uni.navigateTo({
										url: "/pages/others/promotionTask/promotionTask"
									})
								}
							}
						})
					}

					//TODO handle the exception
				}
			},
			getRewardDetail(id) {
				RewardDetailApi(id).then(res => {
					console.log("res", res)
					if (res.code == 200) {
						this.dataform = {
							...res.data
						}
					}
				})
			},

			getGz() {
				getCoinList().then(res => {
					this.gz = res.data
					this.but[0] = `每推广${this.gz.numberPeople}人，扣除金币${this.gz.coin}个，未扣金币\n存入个人帐户`;
					if (this.item.isReward == 1) {
						console.log("tototo", this.item.isReward)
						this.getRewardDetail(this.item.rewardId);
					}
				})
			},
			a(index, data) {
				console.log(index, data)
			}
		},

	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.ipt-s {
		display: block;
		width: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
		text-align: right;
	}

	.ipt-s2 {
		width: 60rpx;
	}

	.ipt-txt {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 1);
	}

	.pd-t-30 {
		padding-top: 30rpx;
	}

	.offer-info {
		padding: 30rpx 0;

		.title {
			font-size: 30rpx;
			font-weight: 400;
			line-height: 42rpx;
			color: rgba(0, 0, 0, 1);
			font-size: 30rpx;
		}

		.pic {
			width: 170rpx;
			height: 144rpx;
			background: #f5f5f5;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.info-txt {
			padding-left: 12rpx;
			width: calc(100% - 170rpx);
			height: 144rpx;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: rgba(128, 128, 128, 1);
		}
	}
</style>